<!--
 * @Author: yuqy
 * @Date: 2021-06-30 10:32:19
 * @LastEditors: yuqy
 * @LastEditTime: 2023-10-24 15:53:08
 * @Descripttion: -
-->
<!--本地预览页面-->
<style lang="less" scoped>
.local_video_wraps {
  background: #fff;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
  padding: 30px 10px 10px;
  margin: 0px 0px;
  position: relative;
  height: 150px;
  .choose_rtsp_wrap {
    position: absolute;
    top: 2px;
    right: 15px;
    text-align: right;
    font-weight: 500;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    h5 {
      color: rgba(54, 153, 255, 1);
      margin-right: 5px;
      padding: 4px 5px 0;
      font-size: 12px;
      user-select: none;
      &.active {
        color: @mainColor;
      }
    }
  }

  .local_right {
    width: 100%;
    position: relative;
    height: 100%;
    .video_wrap {
      position: relative;
      z-index: 1;
      background: #100c00;
      overflow: hidden;
      border-radius: 10px;
      height: 100%;
      canvas {
        width: 100%;
      }
      .homeSpeaker_local_video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
      }
      .loading_video {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0%;
        left: 0%;
        overflow: hidden;
        span {
          position: absolute;
          opacity: 0.85;
          left: 50%;
          top: 0;
          bottom: 0;
          margin: auto;
          height: 20px;
          line-height: 20px;
          color: #fff;
          font-size: 15px;
        }
        img {
          display: inline-block;
          width: 60%;
          top: 0;
          bottom: 0;
          margin: auto;
          height: 100%;
          position: absolute;
          left: 10%;
        }
      }
    }
    .choose_video_source_wrap {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 999;
      border-radius: 10px;
      padding: 10px 0;
      .choose_video_source_wrap_bg {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.25);
        border-radius: 10px;
      }
      & > div {
        float: left;
        width: 25%;
        text-align: center;
        height: 50%;
        background: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 99;
        span {
          padding: 8px 0;
          width: 90%;
          display: block;
          background: #cccccc;
          border-radius: 5px;
          font-size: 10px;
          user-select: none;
          &.active {
            color: @mainColor;
          }
        }
      }
    }
  }
}
</style>
<template>
  <!-- 展示当前本地视频内容 -->
  <div class="local_video_wraps" >
    <div class="choose_rtsp_wrap">
      <h5
        v-ripple
        :class="isChoose?'active':''"
        v-if="rtspIp && isChooseVirtualCamera && !isWeb"
        @click="isChoose = !isChoose"
      >导播切换</h5>
      <SVGs :level="networkQuality.uplinkNetworkQuality"/>
    </div>
    <div class="local_right">
      <!-- 展示本地视频 -->
      <div class="video_wrap" @click="showConsole">
        <div class="loading_video" v-if="isShowLoadingVideo">
          <img src="@/assets/img/loading.png" alt>
          <span>画面获取中...</span>
        </div>
        <div
          class="homeSpeaker_local_video"
          id="homeSpeaker_local_s_video_wrap"
          style="height: 100%;"
        ></div>
        <!-- <div
          class="homeSpeaker_local_video"
          id="homeSpeaker_local_s_video_camera_wrap"
          style="height: 100%;"
        ></div> -->
      </div>

      <!-- 选择导播 -->
      <!-- 选择了虚拟摄像头，并且包含导播的情况下 才可以选择导播的功能 -->
      <transition
        leaveActiveClass="animate__fast animate__animated animate__fadeOut"
        enterActiveClass="animate__fast animate__animated animate__fadeIn"
        name="transition"
      >
      <div class="choose_video_source_wrap" v-if="isChoose">
        <i class="choose_video_source_wrap_bg" @click.stop="isChoose = false"/>

        <div v-for="(item, index) in actions" :key="index" v-ripple>
          <span
            :class="index == chooseIndex?'active':''"
            @click="modelSelect(item, index)"
          >{{ item.name }}</span>
        </div>
        <!-- 是否切换自动导播 -->
        <div>
          <van-switch
            :loading="switchLoading"
            :model-value="isAutoCheck"
            size="24px"
            active-color="#FE6400"
            style="border: 1px solid #fff;"
            @click="modelSelectModel()"
          />
        </div>
      </div>
      </transition>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
import SVGs from "@/components/icon/svg.vue";
import { mapState } from "vuex";
import "vant/lib/switch/style";
const actions = [
  { name: "电脑画面", color: "#ee0a24", loading: false, value: "1", cmd: "1" }, // 默认电脑 mainChn[]  mode[manual] 手动模式
  { name: "教师特写", loading: false, value: "1", cmd: "2" },
  { name: "学生特写", loading: false, value: "1", cmd: "3" },
  { name: "教师全景", loading: false, value: "1", cmd: "4" },
  { name: "学生全景", loading: false, value: "1", cmd: "5" }
];
export default {
  name: "JOIN",
  components: {
    SVGs
  },
  setup() {
    return {};
  },
  data() {
    return {
      localVideoMinHeight: "200px",
      isChoose: false,
      rtspIp: "111",
      isChooseVirtualCamera: "true",
      networkQuality: {
        uplinkNetworkQuality: 1
      },
      isShowLoadingVideo: true,
      actions,
      isWeb: false,
      chooseIndex: 0,
      switchLoading: false,
      isAutoCheck: false // 是否切换自动导播
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo, // 企业人员信息
      roomInfo: state => state.roomAgora.roomInfo, // 房间信息
    })
  },
  watch: {},
  props: {},
  mounted() {},
  created() {},
  methods: {
    modelSelect() {},
    modelSelectModel() {
      this.switchLoading = true
      setTimeout(() => {
        this.switchLoading = false
        this.isAutoCheck = !this.isAutoCheck
      }, 1000)
    }
  }
};
</script>
